{% extends "base.html" %}
{% load static %}

{% block headjs %}
    <link href="{% static 'datatables/datatables.min.css' %}" rel="stylesheet">



{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg">
            <div class="card">
                <div class="card-header">

  <div class="row">
    <div class="col-sm">
      <a type="button" class="btn btn-success" href="{% url 'Kehu_Create' %}">新增客户</a>
        <a type="button" class="btn btn-success" href="{% url 'Kehu_Create' %}">导入</a>
        <a type="button" class="btn btn-success" href="{% url 'Kehu_Create' %}">导出</a>
    </div>
    <div class="col-sm">
      <form class="form-inline my-2 my-lg-0 ml-auto" method="get" action="">
                        <input class="form-control mr-sm-2" type="search" placeholder="模糊搜索" aria-label="Search" name="search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>

    <div class="row mt-2">

         <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="search-customer" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
        <label class="sr-only" for="inlineFormInput">Username</label>
      <div class="input-group mb-2">
        <input type="text" class="form-control" id="search-contact" placeholder="Username">
      </div>
    </div>

  </div>

    </div>


        <div class="search-boxes">




        <!-- 为其他字段添加更多搜索框 -->
    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">

                        <table  id="example" class="table table-striped table-bordered dt-container dt-bootstrap4" style="width:100%">
                            <thead>
                            <tr>
                                <th>客户</th>
                                <th>客户联系人</th>
                                <th>联系电话</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for kehu in kehu_list %}
                                <tr>
                                    <th> <a href="{% url 'Kehu_detail' pk=kehu.id %}">{{ kehu.username }}</a></th>
                                    <th>{{ kehu.name }}</th>
                                    <th>{{ kehu.tel }}</th>
                                    <th>{{ kehu.beizhu }}</th>
                                    <th>
                                        <a type="button" class="btn btn-warning" href="{% url 'Kehu_detail' pk=kehu.id %}">详情</a>
                                    </th>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block footerjs %}

    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap4.js"></script>
        <script src="{% static 'datatables/datatables.min.js' %}"></script>
   <script>
        // 初始化 DataTable
        $(document).ready(function () {
    var table = $('#example').DataTable(
            {
                "sarching": true // 启用搜索框
                , "ordering": true // 启用排序
                , "paging": true // 启用分页
                , "info": true // 显示信息
                , "lengthChange": true // 启用下拉框
                , "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] // 设置下
                , "language": {
                    "sProcessing": "正在获取数据，请稍候...",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "没有找到符合条件的数据",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由总计 _MAX_ 条记录过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "sLoadingRecords": "载入中...",
                    "sZeroRecords": "没有匹配结果",
                    "aria": {
                        "sortAscending": ": 升序排列此列",
                        "sortDescending": ": 降序排列此列"
                    },
            }
        }
    ); // 初始化DataTable

    // 为客户搜索框添加事件监听器
    $('#search-customer').on('keyup change', function () {
        table.column(0).search($(this).val()).draw(); // 0 是客户字段的索引
    });

    // 为客户联系人搜索框添加事件监听器
    $('#search-contact').on('keyup change', function () {
        table.column(1).search($(this).val()).draw(); // 1 是客户联系人字段的索引
    });
    // 为其他搜索框添加更多事件监听器...
});
    </script>
{% endblock %}
